<!-- CosPlayer报名页 -->
<template>
    <div>
        <Header></Header>
        <h2 class="cosFormTitle">千锋漫漫漫漫漫展报名</h2>
        <div class="cosForm">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" show-password></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即报名</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import qs from 'qs';
export default {
    data() {
        return {
            ruleForm: {
                username: '',
                password: '',
                categary: '扮演者',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9]{6,15}$/, message: "不可以输入特殊符号或中文", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let res = await this.$http({
                        method: "POST",
                        url: 'http://10.3.136.136:8888/register',
                        data: qs.stringify(this.ruleForm),
                        headers: { 'content-type': 'application/x-www-form-urlencoded' },
                    })
                    if (res.status.code !== 200) {
                        this.$message({
                            message: res.message,
                            type: 'warning'
                        });
                        return
                    }
                    this.$message({
                        message: `${this.ruleForm.username} 报名成功`,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: '账号密码不符合规则',
                        type: 'warning'
                    });
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.cosForm {
    width: 30vw;
    height: 30vw;
    // margin: 100px auto;

    margin: 0 auto;
}

.cosFormTitle {
    margin: 50px auto 30px;
    width: 240px;
    // margin: 50px auto;
}
</style>